<template>
  <div class="top-bar">
    <div class="top-warp">
      <h1 class="logo"><router-link to="/" class="logo-link"></router-link></h1>
      <ul class="top-nav" @click="changeCurrentTopNav($event)" ref="TopNavRef">
        <li class="current-li">发现音乐</li>
        <li @click="$Message({ msg: '功能未开发' })">我的音乐</li>
        <li @click="$Message({ msg: '功能未开发' })">关注</li>
        <li @click="$Message({ msg: '功能未开发' })">商城</li>
        <li @click="$Message({ msg: '功能未开发' })">音乐人</li>
        <li @click="$Message({ msg: '功能未开发' })" class="download-client">
          下载客户端
          <sub class="hot">&nbsp;</sub>
        </li>
      </ul>
      <div class="login">
        <a
          href="javascript:;"
          @click="$store.commit('Login/setLoginDisplay', true)"
          v-if="!$store.state.Login.isLogin"
          >登录</a
        >
        <div v-else>
          <div class="user-avater">
            <img :src="$store.state.Login.userInfo.profile.avatarUrl" alt="" />
          </div>
          <div class="user-nav-wrap">
            <ul class="user-nav-list">
              <li class="item" :class="nav.itemClass" v-for="nav in userNav" :key="nav.key">
                <a href="javascript:;" @click="clickHandler(nav)" v-if="nav.key !== 'out'"
                  ><i class="icn" :class="'icn-' + nav.key"></i
                  ><span class="title">{{ nav.title }}</span></a
                >
                <a href="javascript:;" @click="logout" v-else
                  ><i class="icn icn-out"></i><span class="title">退出</span></a
                >
              </li>
            </ul>
            <i class="icn arr"></i>
          </div>
        </div>
      </div>
      <a
        href="https://music.163.com/#/login?targetUrl=%2Fcreatorcenter"
        target="_blank"
        class="creator-center"
        >创作者中心</a
      >
      <Search></Search>
    </div>
    <SubNav></SubNav>
  </div>
</template>

<script>
import SubNav from './SubNav/SubNav'
import Search from './Search/Search.vue'
import { logout } from '@/api/login.js'
export default {
  components: { SubNav, Search },
  data() {
    return {
      userNav: [
        { title: '我的主页', key: 'home', itemClass: '', url: '/user/home?id=' },
        { title: '我的消息', key: 'msg', itemClass: '' },
        { title: '我的等级', key: 'lv', itemClass: '' },
        { title: 'VIP会员', key: 'vip', itemClass: '' },
        { title: '个人设置', key: 'set', itemClass: 'set' },
        { title: '实名认证', key: 'verify', itemClass: 'verify' },
        { title: '退出', key: 'out', itemClass: '' }
      ]
    }
  },
  methods: {
    // 切换topnav的当前样式
    changeCurrentTopNav(e) {
      this.$refs.TopNavRef.childNodes.forEach(item => item.classList.remove('current-li'))
      e.target.classList.add('current-li')
    },
    clickHandler(nav) {
      if (nav.key !== 'home') {
        this.$Message({ msg: '功能未开发' })
      } else {
        this.$router.push(nav.url + this.$store.state.Login.userInfo.profile.userId)
      }
    },
    // 退出登录
    async logout() {
      const res = await logout()
      this.$store.commit('Login/setCookie', '')
      this.$store.commit('Login/setisLogin', false)
      this.$store.commit('Login/setUserInfo', {})
    }
  }
}
</script>

<style lang="less" scoped>
@import './header.less';
</style>
